<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>

<body>
    <div>邮箱:<input type="text" ref="names" value="请输入邮箱" v-test></div><div v-if="boole">格式错误</div>
    <!-- <div @click="sub()">aa</div> -->
</body>

<script>

    let obj = {
        data() {
            return {
                boole:false
            }
        },

        //    mounted(){
        //     this.$refs.list.focus()

        //    },

        // methods: {
        //     sub: function () {
        //         // console.log(this.$refs.names.value);
        //         // let m = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this.$refs.names.value)  
        //         // console.log(m);
        //         this.boole=!this.boole

        //     }
        // },

        directives: {
        
        test:function(el){
            el.onclick=function(){
                el.value=""
            }

            el.onblur=function(){
                let m = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(el.value) 
                console.log(m);
                this.boole=m
            }


         
            
       

        }
        
        
        }


    }


    Vue.createApp(obj).mount('body')


</script>

</html>